{extends file="../home.html"}
{block name="title"}{$head_title}{/block}
{block name="css"}
<link rel="stylesheet" type="text/css" href="/Public/Css/front/front_css/live.css">
<link rel="stylesheet" type="text/css" href="/Public/Css/front/front_css/recharge_pay_pop.css">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/Css/front/front_css/refresh_load.css?version={$version}"/>
<style type="text/css">
	#load_wrapper{
		margin-top: 2.25rem;
		background-color: #f3f3f3;
	}
	/*密码框*/
#pwd_box{
	display: none;
}
#pwd_box .pop_back{
	width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
    position: fixed;
    display: block;
    top: 0;
    z-index: 1001;
}
#pwd_box .pwd_pop{
	width: 100%;
    height: 10rem;
    position: fixed;
    bottom: 0;
    z-index: 1001;
    background-color: #fff;
}
.pwd_detail{
	width: 100%;
    height: 2.5rem;
    line-height: 2.5rem;
    font-size: 0.9rem;
    color: #323232;
    text-align: center;
    border-bottom: 0.05rem solid #E1E1E1;;
}
.close_pwd {
    background-image: url(/Public/Images/front/front_img/icon_sign_close.png);
    width: 1.1rem;
    height: 1.1rem;
    background-size: 1.1rem 1.1rem;
    position: absolute;
    top: 0.7rem;
    left: 3.2%;
}
.input_box{
	width: 17.1rem;
	margin:.75rem auto;
	position: relative;
	height: 2.3rem;
}

.dot{
	width: 2.875rem;
    height: 2.3rem;
    border: 0.05rem solid #efefef;
    position: absolute;
    top:0;
    left: 0;
    background-color: #fff;
    box-sizing: border-box;
    border-right: 0;
}
.dot::after{
	content: "";
	width: 0.4rem;
    height: .4rem;
    border-radius: 50%;
    display: block;
    background-color: #000;
    position: absolute;
    top:0;
    right: 0;
    bottom: 0;
    left:0;
    margin: auto;
    display: none;
}
.dot.show::after{
	display: block;
}
.dot_1{
	left:0;
}
.dot_2{
	left: 2.875rem;
}
.dot_3{
	left: 5.75rem;
}	
.dot_4{
	left:8.625rem;
}
.dot_5{
	left: 11.5rem;
}
.dot_6{
	left:14.375rem;
	border-right: 1px solid #efefef;
}
.input_box input{
	width: 150%;
	height: 2.3rem;
	position: absolute;
	left: 0;
	top:0;
	background: transparent;
	z-index: 10;
	color: transparent;
	text-indent: -999px;
	margin-left: -50%;
}
.forget_pwd{
	width: 17.1rem;
	margin: auto;
	font-size: .65rem;
	line-height: .9rem;
	color: #4A90E2;
	text-align: right;
}
.forget_pwd a{
	color: #4A90E2;
}
#pay_box .choose_pay .title{
	position: inherit;
}
</style>
{/block}
{block name="content"}
<div class="title">
	<span class="go_back"></span>
	{$head_title}
	<a href="/FrontIndex/message_center" class="native_go">
		<span class="icon_info">
			<!--是否有消息圆点-->
			{if $is_read}<div class="point"></div>{/if}
		</span>
	</a>
</div>
<div id="load_wrapper">
	<div id="scroller">
		<div id="pullDown">
		    <span class="pullDownIcon"></span>
		</div>
		<ul class="live_list">
			{foreach from = $live_list item = this}
			<li class="live_room" data-live_id="{$this.live_id}">
				<span class="jump_live"  data-url="{$this.url}">
					<img class="room_pic" src="{$this.pic}?imageMogr2/auto-orient/thumbnail/800x/imageslim">
					<span class="bofang_icon"></span>
					<span class="room_name">{$this.live_name}</span>
					<span class="tickets">入场券：￥{$this.price}</span>
				</span>
			</li>
			{/foreach}
		</ul>

		<div id="pullUp">
				<span class="pullUpIcon"></span><span class="pullUpLabel">上拉加载...</span>
		</div>
	</div>
</div>


<!-- 充值弹窗 -->
<!--支付弹窗-->
<div id="pay_box" style="display: none;">
	<div class="pop_back"></div>
	<div class="pay_pop">
		<div class="recharge_detail">
			<span class="close_pay"></span>
			充值详情
		</div>

		<div class="recharge_amount">
			充值金额
			<span class="amount">0元</span>
		</div>
		<div class="interval"></div>
		<div class="choose_pay">
			<div class="title">选择支付方式</div>
			<div class="pay" data-pay_way="alipay">
				<i class="icon_pay zhifubao"></i>
				<p>支付宝支付</p>
				<span class="paymethod on"><input type="radio"   name="pay_method" value="alipay" class="radioclass" checked></span>
			</div>
			<div class="pay" data-pay_way="wx_pay">
				<i class="icon_pay weixin"></i>
				<p>微信支付</p>
				<span class="paymethod"><input type="radio"  name="pay_method" value="wx_pay" class="radioclass"></span>
			</div>
		</div>

		<input type="submit" class="confirm" value="支付" id="zhifu">

	</div>	
</div>
<!--充值弹窗-->
<div id="recharge" style="display: none;">
	<div class="pop_back"></div>
	<div class="recharge_pop">
		<div class="recharge_detail">
			<span class="close_recharge"></span>
			余额不足，需先充值
		</div>
		<div class="choose_amount">
			<p>请选择充值金额</p>
			<div class="btn_group">
				<span class="btn active money" data-money="1">1元</span>
				<span class="btn money" data-money="2">2元</span>
				<span class="btn money" data-money="5">5元</span>
				<span class="btn money" data-money="10">10元</span>
				<span class="btn money" data-money="20">20元</span>
				<span class="btn money" data-money="50">50元</span>
				<span class="btn money" data-money="100">100元</span>
				<span class="btn money zdy_money" data-money="" style="display: none"></span>
				<input type="number" placeholder="自定义" class="btn customize" 
				placeholder="自定义" onfocus="this.placeholder='';$('.money').removeClass('active');" onblur="this.placeholder='自定义'">
			</div>
		</div>
		<div class="balance">钱包余额<span style="color:#000000">0元</span></div>
		<input type="submit" class="confirm" style="top:0.7rem" value="充值" id="chongzhi">
	</div>
</div>
<!-- 密码 -->
<div id="pwd_box">
	<div class="pop_back"></div>
	<div class="pwd_pop">
		<div class="pwd_detail">
			<span class="close_pwd"></span>
			输入支付密码
		</div>
		<div class="input_box">
			<input type="tel" maxlength="6" id="pwd_ipt">
				<span class="dot dot_1"></span> 
				<span class="dot dot_2"></span> 
				<span class="dot dot_3"></span> 
				<span class="dot dot_4"></span> 
				<span class="dot dot_5"></span> 
				<span class="dot dot_6"></span> 
		</div>
		<p class="forget_pwd native_go"><a href="/FrontUserCenter/forget_pay_psw
">忘记密码&nbsp;</a></p>
	</div>
</div>



{/block}
{block name="js"}
<script type="text/javascript" src="__PUBLIC__/Js/front/iscroll.js"></script>
<script type="text/javascript" src="__PUBLIC__/Js/front/front_js/live_channel.js"></script>
<script>
	var total = parseInt('{$total}')
	var firstRow = parseInt('{$firstRow}')
	var buying = false;
</script>
<script type="text/javascript" src="__PUBLIC__/Js/front/js/live_pay.js"></script>
<script type="text/javascript">
{literal}

	var home_banner = new Swiper('.home_banner',{
        pagination: '.swiper-pagination',
        paginationClickable: true,
        autoplay: 2000,//可选选项，自动滑动
    })

</script>
{/literal}
{/block}
